-
Notifications
You must be signed in to change notification settings - Fork 167
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add a Functioning IDE for the playground #19
Conversation
No functionality.
Changes: - Changed `Playground` component to a statefull one (extends `React.Component) - add property `playgroundCode` to IApplicationState (bad practice, change to a slice of the state instead) - add interface `IPlaygroundProps` to denote the properties passed to Playground
Once again, this is a WIP. Text typed into the playground editor will stay in the playground (or rather, appear again) after leaving and coming back. Changes: - added of action, actionCreator (updatePlaygroundCode) - added a reducer under application's `reducer` function Possible problems: - Location of reducer - Location of playgroundCode stored (as in previous commit)
Made a compromise by including an IPlaygroundState as part of IApplicationProps
This is a copy over of the current state of `./frontend/src/toolchain` at source-academy/source-academy2 67d9184. It includes only source chapter 1, a new specification (see [PR 6 at the source-academy/source-academy2](source-academy/source-academy2#6) repository).
The react types were added as a result of the `yarn add` command.
I realised that source academy does not clear the context, and that clearing only the output is in line with most command-line applications and REPLs. This reverts commit 4bd3c44.
Was received from merging master into the branch
Would cause tiny bit of empty space on the right of the page, slightly outside the viewport.
…ntend into functioning-ide Oops
Readability changes.
Okay, so slang's display needs access to the store in order to call dispatch, so that the display can be output'd in realtime. In the previous commit, this was achieved by importing the instantiated store from src/index.tsx into src/slang/stdlib/misc.ts. This works when the full server is running, but fails with the tests, because mockContext calls createContext, which imports stdlib/misc, which tries to import store. But because it's just a test, and store doesn't exist, the test fails.
Next, change display so that if playground.output array is empty, initialise.
This is because the Output SFC tries to access an undefined output.consoleLogs. output.consoleLogs is undefined after an Eval button click, because EVAL_INTERPRETER_(SUCCESS|ERRORS) will try to access the last element of playground.outputs, but the last element after playground.outputs is always a CodeOutput for Eval button presses; and CodeOutput doesn't have a consoleLogs property, so EVAL_INTERPRETER_(SUCCESS|ERRORS) copies over undefined as the new ResultOutput or ErrorOutput's consoleLog property.
Sorry, we realise this PR is kinda big. Will cut them down in size in the future (~1 issue/PR). |
import EditorContainer from '../../containers/IDE/EditorContainer' | ||
import ReplContainer from '../../containers/IDE/ReplContainer' | ||
|
||
const IDE: React.SFC<{}> = () => ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe Workspace
would be a better name?
In any case, this looks like a container only component for me, so you can even name it like PlaygroundLayout
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Created issue #34 for this refactor. Right now there are quite a number of changes directly related to this component, we predict that refactoring the name right now will cause quite a mess. It should be a smoother process once we merge in the changes to IDE and start working on other components (dashboard, etc.) in the future. Meanwhile, we keep track of this as an issue (so it's not forgotten).
...state, | ||
context: createContext() | ||
} | ||
case HANDLE_CONSOLE_LOG: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not sure what's the benefit of grouping console logs. In fact, under certain circumstances this might not be what you want (e.g what if the console log is done asynchronously?)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The intent would be to group the display()
outputs of a particular program together in one Card, as compared to one card per output (as in sourceacademy), so as to increase the readability of one's program outputs (code output, displays and then the result).
I did not consider asynchronous outputs previously, it could cause problems with the solution here. @ningyuansg any thoughts?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We are trying to have one output per program. That is, each program results in exactly one card being displayed (with the exception of CodeOutput).
I recorded a comparison here. The distinction between logs and results/errors will be more prominent after we add text colour with code tags.
The aim is to emulate normal behaviour in most shells. When a program is run, the user is only given back the prompt after stdout/stderr has finished printing their stuff. The area of output between prompts (user $
) is analogous to our <Card />
block elements.
Async certainly deviates from this behaviour, but the reducer is smart enough to handle it at least without crashing. Async is also pretty rare in CS1101S. It was present only as a 6th MC sidequest last year, and considering next year's CS1101S is 4 MCs the source language may not need to support async.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@evansb An updated preview of what we're trying to accomplish with the new ui design at 5d546c4: https://youtu.be/acq7FX8-MI0
consoleLogs: [action.payload] | ||
}) | ||
} else { | ||
lastOutput.consoleLogs = lastOutput.consoleLogs.concat(action.payload) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this mutates oldstate.output[oldstate.output-1].consoleLogs
, which in Redux is an antipattern
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Since this PR is blocking, let's resolve the comments later. Hopefully this will be the last huge PR, in general it's very hard to review but I understand the intent so this is ok |
Features added
slang
(hence the numerous file additions)IDE
container (to maintain reusability)Issues fixed
bindActionCreators
#11readonly
#14Notes:
no-empty
has been turned off. We feel that semantically, a no-op is easier to understand with empty curly braces as opposed tonull
. Input on this would be appreciated, as we can easily reinstate the rule.What's next: